<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 圆角带刻度仪表图样式1
 * @LastEditTime: 2021-11-18 10:16:39
 * @FilePath: \tianjushi-kanban\src\components\charts\DoubleBar1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "Y标题",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: {
        xData: ["1月", "2月", "3月", "4月", "5月"],
        yData: [
          [200, 300, 400, 200, 300],
          [200, 300, 400, 200, 300],
        ],
        title: ["昨日", "今日"],
      },
    },
    color: {
      default: [
        ["#fccb05", "#f5804d"],
        ["#8bd46e", "#09bcb7"],
      ],
      type: Array,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    barWidth: {
      default: 35,
      type: Number,
    },
  },
  setup: function (props, context) {
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(state.chartInit);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      const option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "60",
          right: "40",
          bottom: "30",
        },
        legend: {
          data: props.chartdata.title,
          textStyle: {
            color: "#ffffff",
            fontSize: props.fontSize,
          },
        },
        xAxis: [
          {
            type: "category",
            data: props.chartdata.xData,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: props.fontSize, //更改坐标轴文字大小
              },
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            name: props.title,
            min: 0,
            // max: 40,
            scale: true,
            nameTextStyle: {
              fontSize: props.fontSize,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: props.fontSize, //更改坐标轴文字大小
              },
            },
            //坐标轴内线的样式
            splitLine: {
              lineStyle: {
                color: "#dedede",
                type: "dashed", //虚线
              },
            },
          },
        ],

        series: [
          {
            name: props.chartdata.title[0],
            type: "bar",
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                // color:'#FFC107',
                /*信息显示方式*/
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: props.color[0][0],
                  },
                  {
                    offset: 1,
                    color: props.color[0][1],
                  },
                ]),
                //barBorderRadius: [8,8,0,0],
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}",
                  textStyle: {
                    fontSize: props.fontSize, //更改坐标轴文字大小
                  },
                  color: props.color[0][0],
                },
              },
            },
             barWidth: props.barWidth,
            data: props.chartdata.yData[0],
            markLine: {
              show: false,
              symbol: "none",
              // data: [{ xAxis: 0, yAxis: 30, symbol: "none" }],
              label: {
                normal: {
                  show: true,
                  position: "end",
                  formatter: "30吨",
                  color: "#fff",
                },
              },
              lineStyle: {
                normal: {
                  type: "solid",
                  color: "#fff",
                },
              },
            },
          },
          {
            name: props.chartdata.title[1],
            type: "bar",
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                // color:'#1BC85E',
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: props.color[1][0],
                  },
                  {
                    offset: 1,
                    color: props.color[1][1],
                  },
                ]),
                //  barBorderRadius: [8,8,0,0],
                /*信息显示方式*/
                label: {
                  textStyle: {
                    fontSize: props.fontSize, //更改坐标轴文字大小
                  },
                  show: true,
                  position: "top",
                  formatter: "{c}",
                  color: props.color[1][0],
                },
              },
            },
            barWidth: props.barWidth,
            //barGap: 0.5,
            data: props.chartdata.yData[1],
          },
        ],
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      state.chartInit = echarts.init(state.echartref);
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>